<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>主页面</title>
    <style>
        html {
            perspective: 800px;
        }

        .outer {
            width: 100%;
            height: 600px;

        }

        .navigate {
            width: 100%;
            height: 60px;
            background-color: #C0C3C8;
            border: 1px solid black;
            display: flex;
        }

        .nav {
            width: 100%;

            display: flex;
        }

        .nav li {
            flex-direction: row;
            font-size: 24px;
            list-style: none;
            text-align: center;

        }

        .nav li a {
            width: 80%;
            height: 50px;
            color: black;
            text-decoration: none;
            padding:10px 130px;
        }

        li:nth-child(1) {
            flex-grow: 1;
        }

        li:nth-child(2) {
            flex-grow: 1;
        }

        li:nth-child(3) {
            flex-grow: 1;
        }

        li:nth-child(4) {
            flex-grow: 1;
        }

        span {
            position: relative;
            left: 160px;
            color: #434343;
        }

        .nav li :hover {
            background-color: #646262;
        }

        .outer .center {
            width: 100%;
            height: 600px;

            position: relative;
            top: 40px;

        }
        .twocenter{
            width: 100%;
            height: 600px;
            display: none;
            position: relative;
            top: 120px;
        }
        .center li {
            width: 250px;
            height: 220px;
            border: 2px solid green;
            background-color: red;
            list-style: none;
            transition: transform 1s;
            transform: translateZ(0);
            box-shadow: 3px 6px 8px rgb(156, 144, 146);


        }
        .twocenter li {
            width: 250px;
            height: 220px;
            border: 2px solid green;
            background-color: red;
            list-style: none;
            transition: transform 1s;
            transform: translateZ(0);

        }

        .center .wz {
            position: relative;
            top: 230px;
            left: 20px;
        }
        .twocenter .wz {
            position: relative;
            top: 230px;
            left: 20px;
        }

        .top li:nth-child(1) {
            background-image: url("../img/战狼.jpg");
            background-size: cover;
        }

        .top li:nth-child(2) {
            background-image: url("../img/谭人街探案.jpg");
            background-size: cover;
        }

        .top li:nth-child(3) {
            background-image: url("../img/红海行动.jpg");
            background-size: cover;
            background-repeat: no-repeat;


        }

        .top li:nth-child(4) {
            background-image: url("../img/小小的愿望.jpeg");
            background-size: cover;

        }

        .bottom li:nth-child(1) {
            background-image: url("../img/摩天营救.jpg");
            background-size: cover;
        }

        .bottom li:nth-child(2) {
            background-image: url("../img/悬崖之上.jpg");
            background-size: cover;
        }

        .bottom li:nth-child(3) {
            background-image: url("../img/战狼.jpg");
            background-size: cover;
        }

        .bottom li:nth-child(4) {
            background-image: url("/WEB-INF/img/刺杀小说家.jpg");
            background-size: cover;
        }

        .outer .center {

            position: relative;
            top: -20px;
        }
        .outer .twocenter{
            overflow: hidden;
            transition: height 1s;
        }
        .center li a {
            width: 250px;
            text-decoration: none;
        }
        .twocenter li a {
            width: 250px;
            text-decoration: none;
        }
        .center .top {
            display: flex;
            flex-direction: row;
            position: relative;
            left: -20px;
            justify-content: flex-start;
        }
        .twocenter .top {
            display: flex;
            flex-direction: row;
            position: relative;
            left: -20px;
            justify-content: flex-start;
        }



        .center .top li {

            width: 250px;
            margin-left: 10px;
            position: relative;
            left: -5px;


        }
        .twocenter .top li {

            width: 250px;
            margin-left: 10px;
            position: relative;
            left: -5px;

        }


        .center .bottom {
            display: flex;
            flex-direction: row;
            position: relative;
            top: 50px;
            left: -20px;
            justify-content: space-between;
        }
        .twocenter .bottom {
            display: flex;
            flex-direction: row;
            position: relative;
            top: 50px;
            left: -20px;
            justify-content: space-between;
        }
        .center .bottom li {
            width: 250px;
            margin-left: 10px;
            position: relative;
            left: -5px;

        }
        .twocenter .bottom li {
            width: 250px;
            margin-left: 10px;
            position: relative;
            left: -5px;

        }
        .top li {

            background-color: #434343;
        }

        .bottom li {
            background-color: #434343;
        }

        .center li:hover {
            transform: translateZ(15px);
        }
        .twocenter li:hover {
            transform: translateZ(15px);
        }
        .wz span {
            display: block;
            width: 200px;
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #999999;
            position: relative;
            top: -20px;
            left: 100px;
        }

        .center .btn {
            position: relative;
            z-index: 999;
            left: 1600px;
            top:-60px;
            border: 1px solid transparent;
            outline: none;
            background-color: white;
            font-size:25px;

        }
        .center .act{
            margin-left: 560px;
            margin:50px auto;
            text-align:center;
        }
        .select input{
            border: 1px solid #999999;
            width: 330px;
            height: 50px;
            font-size: 16px;
            color: #999999;
            position: relative;
            top: 40px;
        }
        .btnn .btn1{
            width: 66px;
            height: 50px;
            background-color: #FF7663;
            color: white;
            border: none;
            position: relative;
            top: -10px;
            left: 195px;
        }
        input:focus{
            outline: none;
        }
        .btnn .btn1:active{

            border: 0 solid transparent;
            outline: none;
        }
        .gl{
            width:50px;
            height:50px;
            position:absolute;
            top:140px;
            left:100px;

        }
        .circle{
            width:25px;
            height:25px;
            border-radius:50%;
            border:3px solid black;
            position:absolute;
            top:135px;
            left:95px;

        }
        .btnn1{
            width:25px;
            height:25px;
            background-color:transparent;
            outline:none;
            color:transparent;
            position:absolute;
            top:135px;
            left:95px;
            z-index:9999;
            border:none;
        }
        .zx :hover{
            color:red;
        }
        .cg{
            color:transparent;
            background-image:url("../img/按钮管理.png");
            background-size:contain;
            background-repeat:no-repeat;
            background-position:10px -2px;
        }
    </style>
    <script>

        window.onload = function () {

            var btn = document.getElementById("Btn");
            var btnn1 = document.getElementById("btnn1");
            var zx=document.querySelector(".zx");
            var cg=document.querySelector(".cg");
            var twoall = document.getElementById("Twocenter");
            var bodyEle=document.body;//获取body标签
            var inputs=document.getElementById("input");
            var dy1=document.querySelector(".dy1");
            zx.onclick=function(){

                zx.style.backgroundColor="transparent";
                zx.style.color="transparent";
                $(".zx").css({"z-index":-1});
                location.href="./登录界面.html";
            }
            cg.onclick=function(){
                $(".zx").css({"z-index":-1});
            }

            btn.onclick = function () {

                twoall.style.display="block";

            }
            btnn1.onclick = function () {

                location.href="/project_02/管理员页面.html";

            }


        }
    </script>
</head>

<body>
<div class="glyphicon glyphicon-user gl"></div>
<div class="circle"></div>
<button class="btnn1" id="btnn1">点击</button>
<div class="outer">
    <div class="navigate">
        <ul class="nav">
            <li><a href="./电视页面.html">电视<span>|</span></a></li>
            <li><a href="./电影页面.html">电影<span>|</span></a></li>
            <li><a href="./娱乐页面.html">娱乐<span>|</span></a></li>
            <li><a href="./优惠页面.html">优惠券<span>|</span></a></li>
        </ul>
    </div>
    <div style="position:relative;left:1847px;top:-46px;border-radius:50%;z-index:99999" class="btn btn-success zx">注销</div>
    <div style="position:relative;left:1790px;top:-46px;border-radius:50%;" class="btn btn-success cg">成功</div>
    <div class="center">
        <form action="view" method="post">
            <input type="text" class="form-control" id="name"
                   placeholder="请输入电影名称" name="movie" style="width:450px;height:50px;margin-left:700px;margin-top:100px;display:inline-block;">
            <input type="submit" value="查询电影" style="width:100px;height:50px;margin-top:-450px;outline: none;border:none;background:#ccc;border-radius:
            6%">

        </form>
        <button class="btn" id="Btn">查看更多>></button>
        <ul class="all">
            <div class="top">
                <li><a href="https://www.baidu.com">
                    <div style="color: black;" class="wz">战狼<span>战狼主演:吴京，余男，斯科特·阿金斯，倪大红，凯尔·夏皮罗，石兆琪，周晓鸥，邓紫衣</span>
                    </div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">唐人街探案<span>王宝强，刘昊然，佟丽娅，陈赫</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">湄公河探案<span>张涵予,彭于晏,冯文娟</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">小小的愿望<span>彭昱畅，王大陆，魏大勋，曾梦雪，贾冰，岳旸，李歌</span></div>
                </a> </li>

            </div>

            <div class="bottom">
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">摩天营救<span>道恩·强森，内芙·坎贝尔，黄经汉，罗兰·默勒</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">悬崖之上<span>张译,于和伟,秦海璐,朱亚文,刘浩存,倪大红,李乃文</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">战狼二<span>吴京，弗兰克·格里罗，吴刚，张翰，卢靖姗，丁海峰</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">刺伤小说家<span>雷佳音,杨幂,董子健,于和伟,郭京飞,佟丽娅</span></div>
                </a> </li>
            </div>
        </ul>

    </div>
    <div class="twocenter" id="Twocenter">
        <ul class="twoall">
            <div class="top">
                <li><a href="https://www.ixigua.com/6737580262332301835">
                    <div style="color: black;" class="wz">战狼<span>战狼主演:吴京，余男，斯科特·阿金斯，倪大红，凯尔·夏皮罗，石兆琪，周晓鸥，邓紫衣</span>
                    </div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">唐人街探案<span>王宝强，刘昊然，佟丽娅，陈赫</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">湄公河探案<span>张涵予,彭于晏,冯文娟</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">小小的愿望<span>彭昱畅，王大陆，魏大勋，曾梦雪，贾冰，岳旸，李歌</span></div>
                </a> </li>

            </div>

            <div class="bottom">
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">摩天营救<span>道恩·强森，内芙·坎贝尔，黄经汉，罗兰·默勒</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">悬崖之上<span>张译,于和伟,秦海璐,朱亚文,刘浩存,倪大红,李乃文</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">战狼二<span>吴京，弗兰克·格里罗，吴刚，张翰，卢靖姗，丁海峰</span></div>
                </a> </li>
                <li><a href="https://baidu.com">
                    <div style="color: black;" class="wz">刺伤小说家<span>雷佳音,杨幂,董子健,于和伟,郭京飞,佟丽娅</span></div>
                </a> </li>
            </div>
        </ul>
    </div>

</div>
</body>

</html>